<template>
  <view class="password-book">
  
    <!-- 密码列表 -->
    <view class="password-list">
      <template v-if="passwordList.length > 0">
        <PasswordCard
          v-for="item in passwordList"
          :key="item.id"
          :title="item.title"
          :account="item.account"
          :password="item.password"
          @delete="handleDelete(item.id)"
          @edit="handleEdit(item)"
        />
      </template>
      <EmptyState
        v-else
        imageSrc="/static/images/empty/empty01.png"
        description="暂无记录"
        :showActions="false"
      />
    </view>
    
    <!-- 底部新增按钮 -->
    <view class="footer-btn-wrapper">
      <button class="add-btn" @tap="handleAdd">新增密码</button>
    </view>
  </view>
</template>

<script>
import PasswordCard from '@/components/common/PasswordCard.vue'
import EmptyState from '@/components/custom/EmptyState.vue'

export default {
  components: {
    PasswordCard,
    EmptyState
  },
  data() {
    return {
      passwordList: []
    }
  },
  onShow() {
    // 页面显示时检查是否有新添加或编辑的密码数据
    const passwords = uni.getStorageSync('passwords');
    const editingPassword = uni.getStorageSync('editingPassword');

    if (passwords) {
      // 处理新增的密码
      console.log('passwords',passwords);
      
      this.passwordList.push(passwords);
      // 清除缓存数据
      uni.removeStorageSync('passwords');
    }
    
    if (editingPassword) {
      // 处理编辑的密码
      const editedPassword = editingPassword;
      const index = this.passwordList.findIndex(item => item.id === editedPassword.id);
      if (index !== -1) {
        // 使用 Vue 的响应式方法更新数组
        this.$set(this.passwordList, index, editedPassword);
        // 或者使用展开运算符创建新数组
        // this.passwordList = [...this.passwordList.slice(0, index), editedPassword, ...this.passwordList.slice(index + 1)];
      }
      
      // 清除缓存数据
      uni.removeStorageSync('editingPassword');
    }
  },
  methods: {
    handleAdd() {
      // 跳转到添加页面
      uni.navigateTo({
        url: '/pages/product/editPasswordForm'
      });
    },
    handleDelete(id) {
      // 处理删除密码
      uni.showModal({
        title: '提示',
        content: '确定要删除这条密码记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.passwordList = this.passwordList.filter(item => item.id !== id);
            // 更新本地存储
            uni.setStorageSync('passwords', JSON.stringify(this.passwordList));
          }
        }
      });
    },
    handleEdit(item) {
      if (item) {
        // 将完整的密码数据存入缓存
        uni.setStorageSync('editingPassword', JSON.stringify(item));
        // 跳转到编辑页面
        uni.navigateTo({
          url: `/pages/activity/editPasswordForm?id=${item.id}`
        });
      }
    }
  },
  onLoad() {
    // 页面加载时从本地存储获取密码列表
    const passwords = uni.getStorageSync('passwords');
    if (passwords) {
      this.passwordList = JSON.parse(passwords);
    }
  }
}
</script>

<style lang="scss" scoped>
/* 
 * 此页面使用了全局按钮样式:
 * - .add-btn: 添加按钮样式
 * - .footer-btn-wrapper: 底部固定按钮容器样式
 * 详见: @/styles/button.scss
 */
.password-book {
  min-height: 100vh;
  background: #F5F7FA;
  padding: 20rpx;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 140rpx;
  
  .header {
    padding: 20rpx 0;
    text-align: center;
    margin-bottom: 20rpx;
    
    .header-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
    }
  }
  
  .password-list {
    padding-bottom: 20rpx;
  }
  
  // 使用全局按钮样式，这里不需要重复定义
  // .footer-btn-wrapper 和 .add-btn 的样式在全局样式表中定义
}
</style>